<template>
	<view class="">
		<form @submit="formSubmit">
					<scroll-view scroll-y>
						
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									入学前户口所在地
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="preEnrollmentHukouAddress" placeholder="输入地址" :value="preEnrollmentHukouAddress"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									入学前婚姻状况
								</view>
							</view>
							<view class="right">
								<picker @change="preEnrollmentMaritalStatusChange" :value="preEnrollmentMaritalStatusIndex" :range="preEnrollmentMaritalStatusArray" name="preEnrollmentMaritalStatus">
									<view class="uni-input">{{preEnrollmentMaritalStatusArray[preEnrollmentMaritalStatusIndex]}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									入学前学历
								</view>
							</view>
							<view class="right">
								<view class="right">
									<picker @change="preEnrollmentEducationChange" :value="preEnrollmentEducationIndex" :range="preEnrollmentEducationArray" name="preEnrollmentEducation">
										<view class="uni-input">{{preEnrollmentEducationArray[preEnrollmentEducationIndex]}}</view>
									</picker>
									<uni-icons type="forward" size="16"></uni-icons>
											
								</view>			
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									毕业单位
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="graduationUnit" placeholder="输入毕业单位" :value="graduationUnit"/>
										
							</view>
						</view>
						
						
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									毕业专业
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="graduationMajor" placeholder="输入名称" :value="graduationMajor"/>
										
							</view>
						</view>
						
						
						
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									毕业证书编号
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="graduationCertificateNumber" placeholder="输入编号" :value="graduationCertificateNumber"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									学习形式
								</view>
							</view>
							<view class="right">
								<picker @change="studyFormChange" :value="studyFormIndex" :range="studyFormArray" name="studyForm">
									<view class="uni-input">{{studyFormArray[studyFormIndex]}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									入学前学位 
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="preEnrollmentDegree" placeholder="输入学位" :value="preEnrollmentDegree"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									学位授予单位
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="degreeGrantingUnit" placeholder="输入单位" :value="degreeGrantingUnit"/>
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									学位授予年月
								</view>
							</view>
							<view class="right">
								<picker mode="date"  @change="degreeGrantingDateChange" :value="degreeGrantingDate" name="date" start="1970-01-01" end="2050-01-01">
									<view class="uni-input">{{degreeGrantingDate}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									学位授予专业
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="degreeGrantingMajor" placeholder="输入专业名称" :value="degreeGrantingMajor"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									学位授予方式
								</view>
							</view>
							<view class="right">
								<picker @change="degreeGrantingMethodChange" :value="degreeGrantingMethodIndex" :range="degreeGrantingMethodArray" name="degreeGrantingMethod">
									<view class="uni-input">{{degreeGrantingMethodArray[degreeGrantingMethodIndex]}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									学位证书编号
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="degreeCertificateNumber" placeholder="输入编号" :value="degreeCertificateNumber"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									考生编号
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="candidateNumber" placeholder="输入编号" :value="candidateNumber"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									入学前档案所在单位
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="preEnrollmentArchiveUnit" placeholder="输入单位" :value="preEnrollmentArchiveUnit"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									档案单位地址
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="archiveUnitAddress" placeholder="输入地址" :value="archiveUnitAddress"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									档案单位邮编
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="archiveUnitPostalCode" placeholder="输入邮编" :value="archiveUnitPostalCode"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									考试方式
								</view>
							</view>
							<view class="right">
								<picker @change="examMethodChange" :value="examMethodIndex" :range="examMethodArray" name="examMethod">
									<view class="uni-input">{{examMethodArray[examMethodIndex]}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									考试信息
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="examInformation" placeholder="输入考试信息" :value="examInformation"/>
										
							</view>
						</view>
						
				</scroll-view>		
						<view class="uni-btn-v">
							<button form-type="submit" class="but">确认提交</button>
						
						</view>
		</form>
	</view>
</template>

<script setup>
import { ref } from 'vue';
const preEnrollmentHukouAddress =ref('');//入学前户口所在地
const preEnrollmentMaritalStatusArray =ref(['请选择','否','是']);//入学前婚姻状况
const preEnrollmentMaritalStatusIndex =ref(0);
const preEnrollmentEducationArray =ref(['请选择','高中','大专','本科','研究生']);//入学前学历
const preEnrollmentEducationIndex = ref(0);
const graduationUnit =ref('');//毕业单位
const graduationMajor =ref('');//毕业专业
const graduationCertificateNumber =ref('');//毕业证书编号
const studyFormArray =ref(['请选择','函数','旁听','全日制']);//学习形式
const studyFormIndex =ref(0);
const preEnrollmentDegree =ref('');//入学前学位
const degreeGrantingUnit =ref('');//学位授予单位
const degreeGrantingDate =ref('0000-00-00');//学位授予日期 
const degreeGrantingMajor =ref('');//学位授予专业
const degreeGrantingMethodArray =ref(['请选择','函数','旁听','全日制']);//学位授予方式
const degreeGrantingMethodIndex =ref(0);
const degreeCertificateNumber =ref('');//学位证书编号
const candidateNumber =ref('');//考生编号
const preEnrollmentArchiveUnit =ref('');//入学前档案所在单位
const archiveUnitAddress =ref('');//档案单位地址
const archiveUnitPostalCode =ref('');//档案单位邮编
const examMethodArray =ref(['请选择','笔试','面试']);//考试方式
const examMethodIndex =ref(0);
const examInformation =ref('');//考试信息


const formSubmit = (e)=>{
	console.log(e);
}

// 学习形式
const studyFormChange = (e)=>{
	
	studyFormIndex.value = e.detail.value;
}

// 婚姻情况
const preEnrollmentMaritalStatusChange = (e)=>{
	
	preEnrollmentMaritalStatusIndex.value = e.detail.value;
}

// 入学前学历
const preEnrollmentEducationChange = (e)=>{
	
	preEnrollmentEducationIndex.value = e.detail.value;
}


// 学位授予日期选择
const degreeGrantingDateChange = (e)=>{
	
	degreeGrantingDate.value = e.detail.value;
}

// 学位授予方式
const degreeGrantingMethodChange = (e)=>{
	
	degreeGrantingMethodIndex.value = e.detail.value;
}

// 考试方式
const examMethodChange = (e)=>{
	
	examMethodIndex.value = e.detail.value;
}


</script>

<style lang='scss' scoped>
	 scroll-view{
	 	height:73vh;
	 	padding: 20rpx 0;
	 }
	 .rows{
	 	display: flex;
	 	justify-content: space-between;
	 	font-size: 26rpx;
	 	line-height: 60rpx;
	 	border-bottom: 1rpx solid #ccc;
	 	margin-bottom: 20rpx;
	 	.left{
	 		display: flex;
	 		justify-content: space-between;
	 		.star{
	 			color:red;
	 		}
	 	}
	 	.right{
	 		display: flex;
	 		justify-content: space-between;
	 		align-items: center;
	 		text-align: right;
	 		color:$xx-color-body;
	 	}
	 }
	 
	 .but{
	 			width: 500rpx;
	 			height: 80rpx;
	 			border-radius: 40rpx;
	 			background: $xx-color-body;
	 			color: #fff;
	 }
	 button::after{ border: none;}
	 button{
	 	line-height:80rpx;
	 }      
</style>